<template>
  <div class="detail">
    <my-header>
      <template #left>
        <span @click="$router.back()">返回</span>
      </template>
      <template #center>
        {{ message.name }}
      </template>
    </my-header>
    <div class="content">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <ul class="right">
        <li v-for="(item, index) in menuList[active].foods" :key="index">
          <img :src="'https://elm.cangdu.org/img/' + item.image_path" alt="" />
          <section>{{ item.name }}</section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myHeader from "../components/myHeader.vue";
import api from "../api/index";
import { useRoute } from "vue-router";
export default {
  components: { myHeader },
  setup() {
    const { query } = useRoute();
    const data = reactive({
      message: {}, // 商家信息
      active: 0,
      menuList: [],
    });
    api.get(`shopping/restaurant/${query.id}`).then((res) => {
      data.message = res;
    });
    api.get(`shopping/v2/menu?restaurant_id=${query.id}`).then((res) => {
      data.menuList = res;
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  .content {
    height: calc(100% - 50px);
    overflow: hidden;
    display: flex;
    .van-sidebar {
      height: 100%;
      overflow-y: auto;
    }
    .right {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      li {
        display: flex;
        background: #fff;
        padding: 10px 15px;
        border-bottom: 1px solid #e9e9e9;
        img {
          width: 80px;
        }
        section {
          flex: 1;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>